<template>
    <div class="main_box" style="padding-right:10px">
        <div class="add_wrap">
            <div class="tit">
                <h2>{{ dataForm.doorLockId ? '编辑门磁报警器' : '新增门磁报警器' }}</h2>
                <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
            </div>
            <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
                <el-row>
                    <el-form-item label="门磁报警器名称" prop="equipName">
                        <el-input v-model="dataForm.equipName" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="门磁报警器昵称" prop="equipNickName">
                        <el-input v-model="dataForm.equipNickName" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="门磁报警器类型" prop="doorLockType">
                        <el-select v-model="dataForm.doorLockType" clearable filterable>
                            <el-option v-for="item in doorLockTypeList" :key="item.id" :value="item.id" :label="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="厂家" prop="factoryId">
                        <el-select v-model="dataForm.factoryId" clearable filterable>
                            <el-option v-for="item in factoryList" :key="item.id" :value="item.id" :label="item.name">

                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="MAC地址" prop="equipMac">
                        <el-input v-model="dataForm.equipMac" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="安装区域" prop="installArea">
                        <el-select allow-create clearable filterable v-model="dataForm.installArea">
                            <el-option v-for="item in installAreaList" :label="item.label" :value="item.value"
                                :key="item.value">

                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="呼叫器" prop="beeperId">
                        <el-select v-model="dataForm.beeperId" clearable filterable :filter-method="selectBeeperSearch">
                            <el-option v-for="item in beeperList" :key="item.id" :value="item.id" :label="item.name">

                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="dataForm.remark"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item>
                        <el-button plain type="primary" @click="sureClick">保 存</el-button>
                        <el-button plain @click="returnList">取 消</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import * as message from "@/constants/message";
import DoorLockApi from '@/api/equip/doorLock';
import BeeperApi from "@/api/equip/beeper"
import FactoryApi from "@/api/system/factory"
export default {
    name: "DoorLockAdd",
    data() {
        return {
            dataForm: {
                doorLockId: "",
                equipName: "",
                equipNickName: "",
                doorLockType: 1,
                equipMac: "",
                installArea: "",
                beeperId: "",
                factoryId: "",
                remark: "",
            },
            doorLockTypeList: [//门磁报警器类型列表
                { id: 1, name: "NB-IoT" },
                { id: 2, name: "WIFI" },
                { id: 3, name: "网关" }
            ],
            installAreaList: [
                { label: "入户门", value: "入户门" },
                { label: "玄关", value: "玄关" },
                { label: "客厅", value: "客厅" },
                { label: "厨房", value: "厨房" },
                { label: "阳台", value: "阳台" },
                { label: "洗手间", value: "洗手间" },
                { label: "卧室", value: "卧室" },
                { label: "书房", value: "书房" },
            ],
            beeperList: [],
            factoryList: [],
            roleRules: {
                /*equipName:[
                    { required: true, message: "请输入门磁报警器名称", trigger: "blur" },
                ],*/
                doorLockType: [
                    { required: true, message: "请选择门磁报警器类型", trigger: "change" },
                ],
                equipMac: [
                    { required: true, message: "请输入MAC地址", trigger: "blur" },
                ],
                // beeperId: [
                //     { required: true, message: "请选择呼叫器", trigger: "change" },
                // ],
            },
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.getFactoryList()
            if (this.$route.query.id) {
                this.dataForm.doorLockId = this.$route.query.id
                this.getData()
            }
        },
        keydown(e) {
            if (e.keyCode == 32) {
                e.returnValue = false;
            }
        },

        getData() {
            var cond = {
                id: this.dataForm.doorLockId
            }
            DoorLockApi.getDoorLockInfo(cond)
                .then(res => {
                    this.$Utils.bindingBean(this.dataForm, res.data)
                    this.getBeeperList(res.data.beeperName)
                })
        },
        // 获取呼叫器列表
        getBeeperList(name) {
            if (name) {
                BeeperApi.beeperList({
                    value: name
                }).then(res => {
                    this.beeperList = res.data
                })
            }
        },
        async getFactoryList() {
            const { data } = await FactoryApi.listIdName()
            this.factoryList = data
        },
        sureClick() {
            // 提交
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    this.$confirm(message.MSG_CONFIRM_SAVE, message.TITLE_PROMPT, {})
                        .then(() => {
                            if (this.dataForm.doorLockId) {
                                this.editData();
                            } else {
                                this.addData();
                            }
                        });
                }
            })
        },
        editData() {
            // 编辑
            var cond = {
                doorLockId: this.dataForm.doorLockId,
                equipName: this.dataForm.equipName,
                equipNickName: this.dataForm.equipNickName,
                doorLockType: this.dataForm.doorLockType,
                equipMac: this.dataForm.equipMac,
                installArea: this.dataForm.installArea,
                beeperId: this.dataForm.beeperId,
                factoryId: this.dataForm.factoryId,
                remark: this.dataForm.remark,
            }
            DoorLockApi.editDoorLock(cond)
                .then(data => {
                    this.$Utils.notifySuccess();
                    this.returnList();
                })
        },
        addData() {
            // 新增
            var cond = {
                doorLockId: this.dataForm.doorLockId,
                equipName: this.dataForm.equipName,
                equipNickName: this.dataForm.equipNickName,
                doorLockType: this.dataForm.doorLockType,
                equipMac: this.dataForm.equipMac,
                installArea: this.dataForm.installArea,
                beeperId: this.dataForm.beeperId,
                factoryId: this.dataForm.factoryId,
                remark: this.dataForm.remark,
            }
            DoorLockApi.addDoorLock(cond)
                .then(data => {
                    this.$Utils.notifySuccess();
                    this.returnList();
                })
        },
        returnList() {
            // 返回上一界面
            this.$store.dispatch('delView', this.$route);
            this.$router.push({ path: '/equip/doorLockManagement' })
        },
        selectBeeperSearch(e) {
            this.getBeeperList(e)
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
<style  lang="scss"></style>
